
<template>
  <view>
     <uni-popup ref="popups" type="bottom" background-color="#fff" @change="bindClose">
			<view class="popup-content" style="height:630rpx">
				<view class="downs" @click="bindClose($event, 1)">
					<view class="downs-btn"></view>
					<view class="">{{ tits }}</view>
				</view>
				<picker-view class="picker-view" :immediate-change="true" :indicator-style="indicatorStyle" :value="selectValue"
					@change="bindChange">
					<picker-view-column>
						<view class="item" v-for="(item, index) in seleArr" :key="index">{{ item.name }}</view>
					</picker-view-column>
				</picker-view>
				<view class="bottoms">
					<view class="reSet" @click="bindClose($event, 1)">取消</view>
					<view class="submit" @click="submitDate">确认</view>
				</view>
			</view>
		</uni-popup>

  </view>
</template>

<script>
export default {
	props:{
		dateCurr: {// 1年月日 2年周 3年月
			type: Number,
			default: 1
		},
		showState: {
			type: Boolean,
			default: false,
		},
		tits:{
			type: String,
			default: '选择楼栋结构'
		},
		seleArr:{
			type:Array,
			default:[]
		}
	},
	data() {
		return {
			indicatorStyle: `color: #0091ff;height: ${Math.round(uni.getSystemInfoSync().screenWidth / (950 / 100))}px;`,
			selectValue: [],// 日期选择
			selectDate:null,
		};
	},
	methods:{
		bindChange(e) {
			this.selectDate = e.detail.value;
		},
		bindClose(e, type) {
			if (!e.show) {
				this.$emit('bindClose', false);
			}
			if (type === 1) {
				this.$emit('bindClose', false);
			}
		},
		// 确认
		submitDate() {
			this.$emit('selectChange', this.selectDate);
			this.$refs.popups.close();
		},
	}

};
</script>

<style lang="scss" scoped>
.popup-content {
	display: flex;
	flex-direction: column;
	padding: 30rpx;
	// height: 50px;
	background-color: #fff;
	border-radius: 8rpx 8rpx 0rpx 0rpx;

	.picker-view {
		width: 680rpx;
		height: 500rpx;
		margin-top: 20rpx;
		margin: 0 auto;

		.item {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			position: relative;

			text {
				position: absolute;
				right: 5%;
				margin-top: 10rpx;
				display: inline-block;
				width: 52rpx;
				height: 28rpx;
				background: #f3f6f8;
				border-radius: 4rpx;
				font-size: 20rpx;
				font-weight: 400;
				text-align: center;
				color: #0091ff;
				line-height: 28rpx;
			}
		}

		.item {}

	}

	/deep/.indicatorStyle {
		color: #0091ff;
	}

	.downs {
		width: 100%;

		.downs-btn {
			width: 64rpx;
			height: 10rpx;
			background: #d8d8d8;
			border-radius: 6rpx;
			margin: 0 auto;
		}
	}

	.bottoms {
		display: flex;
		margin-top: 20rpx;

		// width: 710rpx;
		view {
			display: flex;
			flex: 1;
			height: 70rpx;
			justify-content: center;
			align-items: center;
			border-radius: 8rpx;
			font-size: 28rpx;
		}

		.reSet {
			background-color: #f5fbff;
			color: #0091ff;
			margin-right: 10rpx;
		}

		.submit {
			background-color: $theme-color;
			color: #fff;
		}
	}
}
</style>